<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>林火预测</title>
    <link rel="stylesheet" href="../../css/functionalAreas/forestFireForecast/index.css" />


  </head>

  <body>
    <header>
      <div style="display: flex;width: 100%;">
        <div class="menu" style="flex:20;margin-right: 295px">
          <ul  role="tablist" style="display:flex;justify-content: space-between">
            <li role="presentation" style="padding-top: 10px;padding-left: 55px"><a href="../../index.html" style="flex: 12;margin: 5px;color: #fff;font-size: 30px;text-decoration: none;padding-top: 10px;font-weight: bold" >云南森林火灾大数据平台</a></li>
            <li role="presentation"  style="padding-top: 20px;padding-left: 270px"><a href="../../index.html" style="flex: 1;margin: 5px;color: #fff;font-size: 15px;text-decoration: none;font-weight: bold" >首页</a></li>
            <li role="presentation" style="padding-top: 20px"><a href="../../html/functionalAreas/forestDataDisplay.html" style="flex: 1;color: #fff;font-size: 15px;text-decoration: none;font-weight: bold">各森林数据展示</a></li>
            <li role="presentation" style="padding-top: 20px"><a href="../../html/functionalAreas/forestFireForecast.html" style="flex: 1;color: #337ab7;font-size: 15px;text-decoration: none;font-weight: bold">林火预测</a></li>
            <li role="presentation" style="padding-top: 20px"><a href="../../html/functionalAreas/dronePatrol.html" style="flex: 3;color: #fff;font-size: 15px;text-decoration: none;font-weight: bold">无人机巡逻</a></li>
            <li role="presentation" style="padding-top: 20px"><a href="../../html/systemManagement/index.html" style="flex: 2;color: #fff;font-size: 15px;text-decoration: none;font-weight: bold">系统管理</a></li>
          </ul>
        </div>
        <div   class="showTime" style="flex: 5;color: #fff;padding-top: 30px">当前时间：2020年3月17-0时54分14秒</div>
      </div>
      <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
          clearTimeout(t); //清除定时器
          dt = new Date();
          var y = dt.getFullYear();
          var mt = dt.getMonth() + 1;
          var day = dt.getDate();
          var h = dt.getHours(); //获取时
          var m = dt.getMinutes(); //获取分
          var s = dt.getSeconds(); //获取秒
          document.querySelector(".showTime").innerHTML =
            "当前时间：" +
            y +
            "年" +
            mt +
            "月" +
            day +
            "-" +
            h +
            "时" +
            m +
            "分" +
            s +
            "秒";
          t = setTimeout(time, 1000); //设定定时器，循环运行
        }
      </script>
    </header>
    <section class="mainbox">
<!--     左-->
      <div class="column">
        <div class="panel bar">
          <h2>
            各森林火险等级柱状图
          </h2>
          <div class="chart" id="chart1"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line">
          <h2>高风险地区火险等级走势</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
          <div style="margin-top: 15px">
            <video autoplay="autoplay" loop="loop" class="dataAllBorder02 video_cage"  style="width: 100%;height: 100%;  top: 50%;" controlsList="nodownload" muted >
              <source class="video" title="主监控位" src="../../video/test_mv02.mov"/>
            </video>
          </div>

          <div class="panel-footer"></div>
        </div>
      </div>
<!--     中-->
      <div class="column">
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>2</li>
              <li>40</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>高火情地区</li>
              <li>中低火情地区</li>
            </ul>
          </div>
        </div>
        <div class="map">
          <div class="chart" id="hot_map"></div>
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
        </div>
      </div>
<!--      右-->
      <div class="column">
        <div class="panel bar1">
          <div id="infoTitle"><h2>当前昆明各项基础信息</h2></div>
          <div class="chart" id="chart5"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line1">
          <h2>火险等级分布</h2>
          <div class="chart" id="chart4"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie1">
          <div style="margin-top: 15px">
            <video autoplay="autoplay" loop="loop" class="dataAllBorder02 video_cage"  style="width: 100%;height: 100%;  top: 50%;" controlsList="nodownload" muted>
              <source class="video" title="主监控位" src="../../video/test_mv02.mov"/>
            </video>
          </div>
        </div>
      </div>
    </section>


    <script src="../../js/functionalAreas/forestFireForecast/flexible.js"></script>
    <script src="../../js/functionalAreas/forestFireForecast/jquery.js"></script>
    <script src="../../js/functionalAreas/forestFireForecast/echarts.min.js"></script>
    <script src="../../js/functionalAreas/forestFireForecast/index.js"></script>




<!--    火险等级占比柱状图-->
    <script>
      let myColor=['#eb2100','#eb3600','#d0570e','#d0a00e','#34da62'];
      let myChart1 = echarts.init(document.getElementById('chart1'));
      let cityNum = ['1','2','3','2','8'];//接收五个火险等级的城市个数
      let degreePercent = [];
      let percent='';

      for(let a=0;a<5;a++){
         percent= cityNum[a]/16*100;
        degreePercent.push(percent)
      }
      option = {
        grid: {
          left: '11%',
          top:'12%',
          right: '0%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [{
          show: false,
        }],
        yAxis: [{
          axisTick:'none',
          axisLine:'none',
          offset:'27',
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize:'16',
            }
          },
          data: ['五级','四级','三级','二级','一级']
        }, {
          axisTick:'none',
          axisLine:'none',
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize:'16',
            }
          },
          data: cityNum,
        },{
          axisLine:{
            lineStyle:{
              color:'rgba(0,0,0,0)'
            }
          },
          data: [],
        }],
        series: [{
          name: '条',
          type: 'bar',
          yAxisIndex: 0,
          data: degreePercent,
          label:{
            normal:{
              show:true,
              position:'right',
              formatter:function(param){
                return param.value + '%'; //图中百分比
              },
              textStyle:{
                color: '#ffffff',
                fontSize:'16',
              }
            }
          },
          barWidth: 12,
          itemStyle: {
            normal: {
              color: function(params) {
                var num=myColor.length;
                return myColor[params.dataIndex%num]

              },
            }
          },
          z: 2
        }, {
          name: '白框',
          type: 'bar',
          yAxisIndex: '1',
          barGap: '-100%',
          data: [99,99.5,99.5,99.5,99.5],
          barWidth: 20,
          itemStyle: {
            normal: {
              color: '#0e2147',
              barBorderRadius: 5,
            }
          },
          z: 1
        }, {
          name: '外框',
          type: 'bar',
          yAxisIndex: 2,
          barGap: '-100%',
          data: [100,100,100,100,100],
          barWidth: 24,
          itemStyle: {
            normal: {
              color: function(params) {
                var num=myColor.length;
                return myColor[params.dataIndex%num]
              },
              barBorderRadius: 5,
            }
          },
          z: 0
        },
          {
            name: '外圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0,0,0,0,0],
            yAxisIndex: 2,
            symbolSize: 28,
            itemStyle: {
              normal: {
                color: function(params) {
                  var num=myColor.length;
                  return myColor[params.dataIndex%num]
                },
                opacity: 1,
              }
            },
            z: 2
          }]
      };
      myChart1.setOption(option)
      window.addEventListener("resize", function() {
        myChart1.resize();
      });
    </script>

    <!--    火险等级热力图-->
    <script>

      let myChart = echarts.init(document.getElementById('hot_map'));
      var uploadedDataURL = "../../json/common/530000.json";
      var areaName = ''

      function showProvince() {
        myChart.showLoading();

        $.get(uploadedDataURL, function(geoJson) {

          myChart.hideLoading();

          echarts.registerMap('云南', geoJson);

          myChart.setOption(option = {
            //backgroundColor:'#FFFFFF',
            title: {
              text: '云南省各森林火险等级',
              textStyle: {
                fontSize: 15,
                fontStyle: 'normal',
                fontWeight: "bolder",
                color: "#fff"
              },
              x: 'center',
              y:20
            },
            visualMap:{
              min:0,
              max:1000,
              left:'left',
              top:'bottom',
              text:['火险等级指数'],//文本
              textColor:"#fff",
              calculable:true,
              inRange:{
                // color: ['#3B5077', '#031525'] // 蓝黑
                // color: ['#ffc0cb', '#800080'] // 红紫
                // color: ['#3C3B3F', '#605C3C'] // 黑绿
                // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                // color: ['#23074d', '#cc5333'] // 紫红
                //color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#1488CC', '#2B32B2'] // 浅蓝
                // color: ['#00467F', '#A5CC82'],// 蓝绿
                color: ['#FFD2D2', '#930000']// 紫红
              },
              textStyle:{
                color:'#fff',
                fontSize:12
              },
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>{c}'
            },
            toolbox: {
              itemSize:15,
              itemGap:50,
              show: true,
              feature: {
                dataView: {
                  title: "详情",
                  padding:'10px',
                  readOnly: true,
                  lang:[' ', '关闭',],
                  backgroundColor:'rgba(0,19,102)',
                  pixelRatio: 4,
                  optionToContent:function(opt){
                    var data = opt.series[0].data
                    var series = opt.series;
                    var table = '<div class="map1"></div>\n' +
                        '          <div class="map2"></div>\n' +
                        '          <div class="map3"></div><p style="text-align: center;padding-top: 100px;color: #fff">各地区火险指数</p><table class="dataViewTable" cellspacing="0" style="margin: auto;margin-top:20px;border: solid 1px white" ><tbody><tr class="dataViewTr" >'
                        + '<td class="dataViewHead" style="color: white;border:solid 1px white;">' + '地区'+ '</td>'
                        + '<td class="dataViewHead" style="color: white;border:solid 1px white;">' + '火险等级数值' + '</td>'
                        + '</tr>'
                    for (var i = 0, l = data.length; i < l; i++) {
                      table += '<tr class="dataViewTr">'
                          + '<td class="dataViewTd" style="color: white;border:solid 1px white;">' + data[i].name + '</td>'
                          + '<td class="dataViewTd" style="color: white;border:solid 1px white;">' + data[i].value + '</td>'
                          + '</tr>';
                    }
                    table += '</tbody></table>';
                    return table;
                  }},
              }
            },
            series: [{
              type: 'map',
              roam: true,
              mapType: '云南',
              label:{
                normal:{
                  show:true
                },
                emphasis:{
                  textStyle:{
                    color:'#FFFFFF'
                  }
                }
              },

              itemStyle: {

                normal:{
                  borderColor:'#389BB7',
                  areaColor:'#FFFFFF',
                },
                emphasis: {
                  areaColor:'#389BB7',
                  borderWidth:0
                }
              },
              animation:false,

              data: [{
                name: '昆明市',
                value:0
              }, {
                name: '普洱市',
                value:100
              }, {
                name: '曲靖市',
                value:200
              }, {
                name: '昭通市',
                value:300
              }, {
                name: '玉溪市',
                value:400
              }, {
                name: '红河哈尼族彝族自治州',
                value:500
              }, {
                name: '文山壮族苗族自治州',
                value:600
              }, {
                name: '西双版纳傣族自治州',
                value:700
              }, {
                name: '临沧市',
                value:800
              }, {
                name: '楚雄彝族自治州',
                value:900
              }, {
                name: '丽江市',
                value:1000
              }, {
                name: '大理白族自治州',
                value:900
              }, {
                name: '保山市',
                value:800
              }, {
                name: '德宏傣族景颇族自治州',
                value:700
              }, {
                name: '怒江傈僳族自治州',
                value:600
              }, {
                name: '迪庆藏族自治州',
                value:600
              }]
            }]
          });
        });
      }

      //var currentIdx = 0;
      showProvince();


      let myChart2 = echarts.init(document.getElementById('chart5'));
      option2 = {
        tooltip: {},
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [2, 4]
            }
          },
          indicator: [
            { name: '温度（℃）', max: 1000},
            { name: '降水量（mm/月）', max: 500},
            { name: '相对湿度（%）', max: 100},
            { name: '风速（m/s）', max: 50},
            { name: '海拔（m）', max: 8888},
            { name: '森林面积（平方公里）', max: 10000}
          ],
          radius: '55%',
          splitArea: {
            areaStyle: {
              color: ['#B8D3E4', '#96C5E3', '#7DB5DA', '#72ACD1']
            }
          },
        },
        series: [{
          name: '',
          roam: true,
          type: 'radar',
          // areaStyle: {normal: {}},
          data: [
            {
              value: [800, 300, 60, 3.2, 2690, 3105.2],
              name: ''
            },
          ]
        }]
      };
      myChart2.setOption(option2,true);

      myChart.on('click',function (data){
        areaName = data.name;
        $("#infoTitle").html('<h2 style="color: white;text-align: center">'+areaName+'各项基础信息</h2>');

      })


    </script>

<!--    火险等级值增量图-->
    <script>
      let myChart4 = echarts.init(document.getElementById('chart4'));
      var option4 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            var tar;
            if (params[1].value !== '-') {
              tar = params[1];
            }
            else {
              tar = params[0];
            }


            let valuescore;
            if(tar.name=="1级"){
              valuescore ="0-200"
            };
            if(tar.name=="2级"){
              valuescore ="200-400"
            };
            if(tar.name=="3级"){
              valuescore ="400-600"
            };
            if(tar.name=="4级"){
              valuescore ="600-800"
            }
            if(tar.name=="5级"){
              valuescore ="800-1000"
            }
            // return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
            return tar.seriesName + ' : '+valuescore
          }
        },
        legend: {
          data: ['一级', '二级', '三级', '四级', '五级'],
          textStyle:{
            color:"#fff"
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: {show: false},
          data: function () {
            var list = [];
            for (var i = 1; i <= 5; i++) {
              list.push( i + '级');
            }
            return list;
          }(),
          axisLabel: {
            color: "rgba(255,255,255,.7)"
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: "rgba(255,255,255,.7)"
          },
        },

        series: [
          {
            name: '辅助',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              barBorderColor: 'rgba(0,0,0,0)',
              color: 'rgba(0,0,0,0)'
            },
            emphasis: {
              itemStyle: {
                barBorderColor: 'rgba(0,0,0,0)',
                color: 'rgba(0,0,0,0)'
              }
            },
            data: [0,200,400,600,800,1000 ]
          },
          {
            name: '一级',
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'top'
            },
            data: [200]
          },

          {
            name: '二级',
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'top'
            },
            data: ['-',200 ]
          },
          {
            name: '三级',
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'top'
            },
            data: ['-', '-',200]
          },
          {
            name: '四级',
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'top'
            },
            data: ['-', '-', '-',200]
          },
          {
            name: '五级',
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'top'
            },
            data: ['-', '-', '-',  '-',200 ]
          }
        ]
      };
      myChart4.setOption(option4);
      window.addEventListener("resize", function() {
        myChart4.resize();
      });
    </script>

    <script src="../../js/home/jquery-2.1.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../../js/home/bootstrap.min.js"></script>
    <script src="../../js/home/wow.min.js"></script>
    <script src="../../js/home/jquery.easing.1.3.js"></script>
    <script src="../../js/home/jquery.isotope.min.js"></script>
    <script src="../../js/home/jquery.bxslider.min.js"></script>
    <script type="text/javascript" src="../../js/home/fliplightbox.min.js"></script>
    <script src="../../js/home/functions.js"></script>
    <script type="text/javascript">$('.portfolio').flipLightBox()</script>
    <script type="text/javascript" src="../../js/home/autoPlay.js"></script>
  </body>
<!--  <script>-->
<!--    $(function (){-->
<!--      $('#p_head').load('../systemManagement/head.html');-->
<!--    })-->
<!--  </script>-->
</html>
